<template>
  <div class="sylogin">
    <img src="@/images/load_back.png" alt="" class="lgbg" />
    <img src="@/images/webgl_infologo.png" alt="" class="webgl_infologod" />
    <div class="synmabox">CT成像设备均匀性、噪声体模检测虚拟仿真教学</div>
    <div class="webgl_infoP3s">实验正在加载，请耐心等待...</div>
    <!-- <div class="loading-text syjd" id="loadingText">
      实验加载中，请稍等...0%
    </div> -->
    <img src="@/images/webgl_infoname.png" alt="" class="webgl_infoname" />
    <div class="progress-container">
      <!--  -->
      <!-- @animationend="startfn" -->
      <div class="progress-bar" @animationend="startfn">
        <!-- <div class="progress-bar"> -->
        <img src="@/images/progress.png" alt="" class="progress-marker" />
      </div>
    </div>

    <div class="dblog">
      <img src="@/images/loading_leftlogo.png" alt="" class="dblogimg" />
      <!-- <img
        src="@/images/fullscreen.png"
        alt=""
        class="dbaaa"
        @click="fullScreenAll"
      /> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkspaceJsonLoaDing',

  data() {
    return {
      progressPercentage: 0
    }
  },

  mounted() {
    // 获取进度条元素和加载文本元素
    const progressBar = this.$el.querySelector('.progress-bar')
    // const loadingText = this.$el.querySelector('#loadingText')

    // 获取动画时长
    const animationDuration =
      parseFloat(window.getComputedStyle(progressBar).animationDuration) * 1000

    // 开始时间
    let startTime = null

    // 更新函数
    const updateProgress = (currentTime) => {
      if (!startTime) {
        startTime = currentTime
      }

      // 计算已过时间
      const elapsedTime = currentTime - startTime

      // 计算当前进度百分比
      // const progressPercentage = Math.round(
      //   (elapsedTime / animationDuration) * 100
      // )

      // 更新加载文本显示
      // loadingText.textContent = `实验加载中，请稍等...${progressPercentage}%`

      // 如果动画还未结束，继续更新
      if (elapsedTime < animationDuration) {
        requestAnimationFrame(updateProgress)
      }
    }

    // 开始更新
    requestAnimationFrame(updateProgress)
  },

  methods: {
    fullScreenAll() {
      let docElm = document.querySelector('#app')

      if (this.isFull) {
        this.isFull = false
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        }
      } else {
        this.isFull = true
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen()
        } else if (docElm.msRequestFullscreen) {
          docElm.msRequestFullscreen()
        } else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen()
        } else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen()
        }
      }
    },
    startfn() {
      this.$router.push({
        name: 'loaDing'
      })
    }
  }
}
</script>

<style>
.dblog {
  /* background: red; */
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 95%;
}
.dblogimg {
  position: relative;
  left: 0px;
}
.dbaaa {
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 3px;
}
.synmabox {
  font-size: 52px;
  color: rgb(27, 52, 182);
  font-weight: bolder;
  position: absolute;
  top: 380px;
  width: 100%;
  text-align: center;
  left: 50%;
  transform: translate(-50%, 0);
}
.webgl_infoname {
  position: absolute;
  bottom: 150px;
  width: 498px;
  height: 50px;
  left: 50%;
  transform: translate(-50%, 0);
}
.webgl_infoP3s {
  font-size: 26px;
  font-weight: 400;
  color: #1b34b6;
  position: absolute;
  top: 520px;
  left: 50%;
  transform: translate(-50%, 0);
}
.webgl_infologod {
  height: 92px;
  width: 298px;
  position: absolute;
  top: 87px;
  left: 50%;
  transform: translate(-50%, 0);
}
.lgbg {
  height: 95%;
  width: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -53%);
}
.sylogin {
  height: 100%;
  width: 100%;
}

.progress-container {
  position: relative;
  width: 95%;
  height: 10px;
  background: rgb(255, 255, 255);

  /* background: linear-gradient(90deg, #2c74ac 0%, #2d73ab 48%, #2d77af 100%); */
  /* border-radius: 61px 61px 61px 61px; */
  /* overflow: hidden; */
  position: absolute;
  bottom: 430px;
  left: 50%;
  transform: translate(-50%, 0);
}

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%; /* 这里设置进度百分比 */
  height: 100%;
  background: rgb(27, 52, 182);
  /* background: linear-gradient(270deg, #81d1ff 0%, #0085ff 100%); */
  /* border-radius: 117px 117px 117px 117px; */
  /* border: 1px solid #00a3ff; */
  animation: progress-animation 3s ease forwards; /* 使用动画 */
}

.progress-marker {
  position: absolute;
  top: 50%;
  right: -13px;
  width: 104px;
  height: 48px;
  transform: translate(0, -50%);
}

@keyframes progress-animation {
  to {
    width: 100%; /* 动画结束时宽度为100% */
  }
}
.syjd {
  position: absolute;
  bottom: 125px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 330px;
  height: 18px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 24px;
  color: #ffffff;
  line-height: 18px;
  letter-spacing: 1px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
</style>
